<template>
	<div class="pages">
		<!-- 政策 -->
		<div class="titlebar">
			<div class="title">
				<div class="line"></div>
				<div class="text" v-text="policy.title"></div>
			</div>
			<div v-if="policy.badge" class="badge" v-text="policy.badge"></div>
		</div>
		<div class="card policy">
			<!-- 各部门发布的政策数量 -->
			<div class="subtitlebar">
				<div class="title">
					<div class="line"></div>
					<div class="text" v-text="policy.moduleNum.title"></div>
				</div>
				<div v-if="policy.moduleNum.badge" class="badge" v-text="policy.moduleNum.badge"></div>
			</div>
			<van-divider class="dashed" dashed />
			<div class="chart-container">
				<Echarts :options="policy.moduleNum.options" />
			</div>
			<div class="legend">
				<div v-for="(item, idx) in policy.moduleNum.options.series[0].data" class="item">
					<div class="square" :style="{ 'backgroundColor': policy.moduleNum.options.color[idx] }"></div>
					<div class="content">
						<div class="title" v-text="item.name"></div>
						<div class="value">
							<span v-text="item.value"></span>
							<span>·</span>
							<span v-text="percentage(item.value, policy.moduleNum.options.series[0].data)"></span>
						</div>
					</div>
				</div>
			</div>
			<!-- 政策发布数量趋势 -->
			<div class="subtitlebar">
				<div class="title">
					<div class="line"></div>
					<div class="text" v-text="policy.moduleTrend.title"></div>
				</div>
				<div class="date">
					<van-tabs v-model:active="policy.moduleTrend.tabs.active" @change="tabChange" type="card">
						<van-tab name="year" title="年"></van-tab>
						<van-tab name="month" title="月"></van-tab>
						<van-tab name="week" title="周"></van-tab>
					</van-tabs>
				</div>
			</div>
			<div class="chart-container chart-h">
				<Echarts :options="policy.moduleTrend.options" />
			</div>
			<!-- 政策被引用次数前十名 -->
			<div class="subtitlebar">
				<div class="title">
					<div class="line"></div>
					<div class="text" v-text="policy.moduleTo10.title"></div>
				</div>
				<div v-if="policy.moduleTo10.badge" class="badge" v-text="policy.moduleTo10.badge"></div>
			</div>
			<van-divider class="divider" />
			<div class="lists">
				<van-pull-refresh class="pull-refresh">
					<van-list @load="onLoad">
						<div class="lists-item" v-for="(item, idx) in policy.moduleTo10.lists" :key="idx">
							<div class="content">
								<div class="icon">
									<img v-if="idx < 3" :src="Noformat(idx)">
									<div v-else>{{ idx + 1 }}</div>
								</div>
								<div class="title" v-text="item.title"></div>
							</div>
							<van-divider class="divider" />
						</div>
					</van-list>
				</van-pull-refresh>
			</div>
		</div>
		<!-- 法律法规 -->
		<div class="titlebar">
			<div class="title">
				<div class="line"></div>
				<div class="text" v-text="laws.title"></div>
			</div>
			<div v-if="laws.badge" class="badge" v-text="laws.badge"></div>
		</div>
		<div class="card laws">
			<!-- 各部门发布的法律法规数量 -->
			<div class="subtitlebar">
				<div class="title">
					<div class="line"></div>
					<div class="text" v-text="laws.moduleNum.title"></div>
				</div>
				<div v-if="laws.moduleNum.badge" class="badge" v-text="laws.moduleNum.badge"></div>
			</div>
			<van-divider class="dashed" dashed />
			<div class="chart-container">
				<Echarts :options="laws.moduleNum.options" />
			</div>
			<div class="legend">
				<div v-for="(item, idx) in laws.moduleNum.options.series[0].data" class="item">
					<div class="square" :style="{ 'backgroundColor': laws.moduleNum.options.color[idx] }"></div>
					<div class="content">
						<div class="title" v-text="item.name"></div>
						<div class="value">
							<span v-text="item.value"></span>
							<span>·</span>
							<span v-text="percentage(item.value, laws.moduleNum.options.series[0].data)"></span>
						</div>
					</div>
				</div>
			</div>
			<!-- 法律法规发布数量趋势 -->
			<div class="subtitlebar">
				<div class="title">
					<div class="line"></div>
					<div class="text" v-text="laws.moduleTrend.title"></div>
				</div>
				<div class="date">
					<van-tabs v-model:active="laws.moduleTrend.tabs.active" @change="lawsTabChange" type="card">
						<van-tab name="year" title="年"></van-tab>
						<van-tab name="month" title="月"></van-tab>
						<van-tab name="week" title="周"></van-tab>
					</van-tabs>
				</div>
			</div>
			<div class="chart-container chart-h">
				<Echarts :options="laws.moduleTrend.options" />
			</div>
			<!-- 法律法规被引用次数前十名 -->
			<div class="subtitlebar">
				<div class="title">
					<div class="line"></div>
					<div class="text" v-text="laws.moduleTo10.title"></div>
				</div>
				<div v-if="laws.moduleTo10.badge" class="badge" v-text="laws.moduleTo10.badge"></div>
			</div>
			<van-divider class="divider" />
			<div class="lists">
				<van-pull-refresh>
					<van-list @load="lawsOnLoad">
						<div class="lists-item" v-for="(item, idx) in laws.moduleTo10.lists" :key="idx">
							<div class="content">
								<div class="icon">
									<img v-if="idx < 3" :src="Noformat(idx)">
									<div v-else>{{ idx + 1 }}</div>
								</div>
								<div class="title" v-text="item.title"></div>
							</div>
							<van-divider class="divider" />
						</div>
					</van-list>
				</van-pull-refresh>
			</div>
		</div>
		<!-- 禁售商品词库 -->
		<div class="titlebar">
			<div class="title">
				<div class="line"></div>
				<div class="text" v-text="banned.title"></div>
			</div>
			<div v-if="banned.badge" class="badge" v-text="banned.badge"></div>
		</div>
		<div class="card banned">
			<!-- 信息上报数据 -->
			<div class="subtitlebar">
				<div class="title">
					<div class="line"></div>
					<div class="text" v-text="banned.moduleNum.title"></div>
				</div>
				<div v-if="banned.moduleNum.badge" class="badge" v-text="banned.moduleNum.badge"></div>
			</div>
			<van-divider class="dashed" dashed />
			<div class="chart-container">
				<Echarts :options="banned.moduleNum.options" />
			</div>
			<div class="legend">
				<div v-for="(item, idx) in banned.moduleNum.options.series[0].data" class="item">
					<div class="square" :style="{ 'backgroundColor': banned.moduleNum.options.color[idx] }"></div>
					<div class="content">
						<div class="title" v-text="item.name"></div>
						<div class="value">
							<span v-text="item.value"></span>
							<span>·</span>
							<span v-text="percentage(item.value, banned.moduleNum.options.series[0].data)"></span>
						</div>
					</div>
				</div>
			</div>
			<!-- 各部门发布的词库数量 -->
			<div class="subtitlebar">
				<div class="title">
					<div class="line"></div>
					<div class="text" v-text="banned.moduleTrend.title"></div>
				</div>
				<div v-if="banned.moduleTrend.badge" class="badge" v-text="banned.moduleTrend.badge"></div>
			</div>
			<van-divider class="divider" />
			<div class="legend2">
				<div v-for="(item, idx) in banned.moduleTrend.options.yAxis[0].data" class="item">
					<div class="square" :style="{ 'backgroundColor': banned.moduleTrend.options.color[0] }"></div>
					<div class="content">
						<span class="title" v-text="item"></span>
						<span class="split">-</span>
						<span class="value" v-text="banned.moduleTrend.options.series[0].data[idx]"></span>
					</div>
				</div>
			</div>
			<div class="chart-container chart-h">
				<Echarts :options="banned.moduleTrend.options" />
			</div>
			<!-- 词库被引用次数的前十名 -->
			<div class="subtitlebar">
				<div class="title">
					<div class="line"></div>
					<div class="text" v-text="banned.moduleTo10.title"></div>
				</div>
				<div v-if="banned.moduleTo10.badge" class="badge" v-text="banned.moduleTo10.badge"></div>
			</div>
			<van-divider class="divider" />
			<div class="lists">
				<van-pull-refresh>
					<van-list @load="bannedOnLoad">
						<div class="lists-item" v-for="(item, idx) in banned.moduleTo10.lists" :key="idx">
							<div class="content">
								<div class="icon">
									<img v-if="idx < 3" :src="Noformat(idx)">
									<div v-else>{{ idx + 1 }}</div>
								</div>
								<div class="title" v-text="item.title"></div>
							</div>
							<van-divider class="divider" />
						</div>
					</van-list>
				</van-pull-refresh>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Echarts from '../../components/Echarts/index.vue'
import '@/styles/font/stylesheet.css'
// 排行榜
import iconNo1 from '@/assets/imgs/basisCensus/no1.png'
import iconNo2 from '@/assets/imgs/basisCensus/no2.png'
import iconNo3 from '@/assets/imgs/basisCensus/no3.png'
import { getBannedCount, getDeparmentPublish, getLawCount, getLawTendency, getPolicyCount, getPolicyQuote, getPolicyTendency } from '@/api/basiscensus'

const sum = (chartArr: any) => {
	return chartArr.reduce((pre: any, cur: any, index: any) => {
		return (index === 1 ? pre.value : pre) + cur.value;
	})
}

const percentage = (value: number, chartArr: any) => {
	const tempSum = sum(chartArr);
	return `${Math.round((value / tempSum) * 100)}%`
}

const Noformat = (index: any) => {
	switch (index) {
		case 0:
			return iconNo1;
		case 1:
			return iconNo2;
		case 2:
			return iconNo3;
	}
}

const policyChart = ref({
	num: 0,
	title: '政策总数据',
})

const policy = reactive({
	title: '政策',
	badge: 0,
	moduleNum: {
		title: '各部门发布的政策数量',
		badge: 0,
		options: {
			legend: {
				show: false,
				bottom: '0%',
				left: 'center',
				width: '100%',
				// itemGap: 50,
				itemWidth: 14,
				itemHeight: 14,
				textStyle: {
					fontSize: 10,
					color: '#181818'
				},
				orient: 'horizontal',
				lineHeight: 56,
				formatter: (name: any) => {
					const data = policy.moduleNum.options.series[0].data;
					let item = data.filter((i: any) => {
						return i.name == name
					})[0]
					if (!item) return
					let p = Math.round((item.value / sum(policy.moduleNum.options.series[0].data)) * 100)
					return [`${name}`, `${item.value} · ${p}%`].join('\n')
				}
			},
			color: ['#4C69DC', '#1FDAE1', '#EAB513', '#5BB4F9'],
			series: [
				{
					type: 'pie',
					radius: ['66%', '90%'],
					center: ['50%', '50%'],
					avoidLabelOverlap: false,
					itemStyle: {
						borderColor: '#fff',
						borderWidth: 6
					},
					label: {
						normal: {
							show: true,
							position: 'center',
							color: '#4c4a4a',
							formatter: '{num|' + policyChart.value.num + '}' + '\n\r' + '{title|' + policyChart.value.title + '}',
							rich: {
								num: {
									fontSize: 50,
									fontFamily: "lcd",
									color: '#1F2E4C',
									fontWeight: '900',
								},
								title: {
									fontFamily: "lcd",
									fontSize: 14,
									color: '#1F2E4C',
									lineHeight: 10,
								},
							}
						},
						emphasis: {//中间文字显示
							show: true,
						}
					},
					lableLine: {
						normal: {
							show: false
						},
						emphasis: {
							show: true
						},
						tooltip: {
							show: false
						}
					},
					data: [
						{ value: 0, name: '监管机构' },
						{ value: 0, name: '企业平台用户' },
						{ value: 0, name: '监管机构用户' },
						{ value: 0, name: '企业平台' },
					]
				}
			]
		} as any,
	},
	moduleTrend: {
		title: '政策发布数量趋势',
		badge: 0,
		tabs: {
			active: 'year'
		},
		options: {
			grid: {
				top: '20%',
				bottom: '20%',
				left: '10%',
				right: "6%"
			},
			tooltip: {
				trigger: "axis",
				backgroundColor: "rgba(38, 104, 255, 0.36)",
				padding: [5, 15]
			},
			xAxis: [
				{
					type: "category",
					boundaryGap: false,
					axisTick: {
						//y轴刻度线
						show: false
					},
					axisLine: {
						lineStyle: {
							color: "#ECECEC", //x轴边框颜色
							width: 1
						}
					},
					axisLabel: {
						margin: 20,
						textStyle: {
							fontSize: 10,
							color: '#646464'
						}
					},
					data: ['']
				}
			],
			yAxis: [{
				axisLine: {
					show: false
				},
				axisLabel: {
					textStyle: {
						fontSize: 10,
						color: '#646464'
					}
				},
			}],
			series: [
				{
					name: "平台企业",
					type: "line",
					smooth: true,
					symbol: "circle",
					symbolSize: 5,
					showSymbol: false,
					lineStyle: {
						normal: {
							width: 1, //波形图波浪的边框
							// borderWidth: 4,
							color: "rgba(76, 150, 250, 1)"
						}
					},
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
								offset: 0, color: 'rgba(76, 150, 250, 0.42)' // 0% 处的颜色
							}, {
								offset: 1, color: 'rgba(76, 150, 250, 0.1)' // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}
					},
					data: [20, 32, 11, 34, 40, 30, 20]
				},
			]
		}
	},
	moduleTo10: {
		title: '政策被引用次数前十名',
		badge: 0,
		refresh: {
			loading: false
		},
		more: {
			loading: false,
			finished: false
		},
		lists: [] as any
	},
})

// tabs 切换回调
const tabChange = (value: any) => {
	getTrendencyPolicy(value)
}

// 下拉刷新回调
const onRefresh = () => {
	// 清空列表数据
	policy.moduleTo10.more.finished = false;

	// 重新加载数据
	// 将 loading 设置为 true，表示处于加载状态
	policy.moduleTo10.more.loading = true;
	onLoad();
}

// 加载更多回调
const onLoad = () => {
	getQuote()
}

const lawsChart = ref({
	num: 0,
	title: '法律法规总数据',
})

const laws = reactive({
	title: '法律法规',
	badge: 0,
	moduleNum: {
		title: '各部门发布的法律法规数量',
		badge: 0,
		options: {
			legend: {
				show: false,
				bottom: '0%',
				left: 'center',
				width: '100%',
				// itemGap: 50,
				itemWidth: 14,
				itemHeight: 14,
				textStyle: {
					fontSize: 10,
					color: '#181818'
				},
				orient: 'horizontal',
				lineHeight: 56,
				formatter: (name: any) => {
					const data = laws.moduleNum.options.series[0].data;
					let item = data.filter((i: any) => {
						return i.name == name
					})[0]
					if (!item) return
					let p = Math.round((item.value / sum(laws.moduleNum.options.series[0].data)) * 100)
					return [`${name}`, `${item.value} · ${p}%`].join('\n')
				}
			},
			color: ['#4C69DC', '#1FDAE1', '#EAB513', '#5BB4F9'],
			series: [
				{
					type: 'pie',
					radius: ['66%', '90%'],
					center: ['50%', '50%'],
					avoidLabelOverlap: false,
					itemStyle: {
						borderColor: '#fff',
						borderWidth: 6
					},
					label: {
						normal: {
							show: true,
							position: 'center',
							color: '#4c4a4a',
							formatter: '{num|' + lawsChart.value.num + '}' + '\n\r' + '{title|' + lawsChart.value.title + '}',
							rich: {
								num: {
									fontSize: 50,
									fontFamily: "lcd",
									color: '#1F2E4C',
									fontWeight: '900',
								},
								title: {
									fontFamily: "lcd",
									fontSize: 14,
									color: '#1F2E4C',
									lineHeight: 10,
								},
							}
						},
						emphasis: {//中间文字显示
							show: true,
						}
					},
					lableLine: {
						normal: {
							show: false
						},
						emphasis: {
							show: true
						},
						tooltip: {
							show: false
						}
					},
					data: [
						{ value: 3612, name: '监管机构' },
						{ value: 2719, name: '企业平台用户' },
						{ value: 1200, name: '监管机构用户' },
						{ value: 1256, name: '企业平台' },
					]
				}
			]
		} as any,
	},
	moduleTrend: {
		title: '法律法规发布数量趋势',
		badge: 0,
		tabs: {
			active: 'year'
		},
		options: {
			grid: {
				top: '20%',
				bottom: '20%',
				left: '10%',
				right: "6%"
			},
			tooltip: {
				trigger: "axis",
				backgroundColor: "rgba(38, 104, 255, 0.36)",
				padding: [5, 15]
			},
			xAxis: [
				{
					type: "category",
					boundaryGap: false,
					axisTick: {
						//y轴刻度线
						show: false
					},
					axisLine: {
						lineStyle: {
							color: "#ECECEC", //x轴边框颜色
							width: 1
						}
					},
					axisLabel: {
						margin: 20,
						textStyle: {
							fontSize: 10,
							color: '#646464'
						}
					},
					data: ['']
				}
			],
			yAxis: [{
				axisLine: {
					show: false
				},
				axisLabel: {
					textStyle: {
						fontSize: 10,
						color: '#646464'
					}
				},
			}],
			series: [
				{
					name: "平台企业",
					type: "line",
					smooth: true,
					symbol: "circle",
					symbolSize: 5,
					showSymbol: false,
					lineStyle: {
						normal: {
							width: 1, //波形图波浪的边框
							// borderWidth: 4,
							color: "rgba(76, 150, 250, 1)"
						}
					},
					areaStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
								offset: 0, color: 'rgba(76, 150, 250, 0.42)' // 0% 处的颜色
							}, {
								offset: 1, color: 'rgba(76, 150, 250, 0.1)' // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}
					},
					data: [0]
				},
			]
		}
	},
	moduleTo10: {
		title: '法律法规被引用次数前十名',
		badge: 0,
		refresh: {
			loading: false
		},
		more: {
			loading: false,
			finished: false
		},
		lists: [] as any
	},
})

// tabs 切换回调
const lawsTabChange = (value: any) => {
	getTrendencyLaw(value)
}

// 下拉刷新回调
const lawsOnRefresh = () => {
	// 清空列表数据
	laws.moduleTo10.more.finished = false;

	// 重新加载数据
	// 将 loading 设置为 true，表示处于加载状态
	laws.moduleTo10.more.loading = true;
	lawsOnLoad();
}

// 加载更多回调
const lawsOnLoad = () => {
	getQuoteLaw()
}

const bannedChart = ref({
	num: 89,
	title: '政策总数据',
})

const banned = reactive({
	title: '禁售商品词库',
	badge: 0,
	moduleNum: {
		title: '信息上报数据',
		badge: 0,
		options: {
			legend: {
				show: false,
				bottom: '0%',
				left: 'center',
				width: '100%',
				// itemGap: 50,
				itemWidth: 14,
				itemHeight: 14,
				textStyle: {
					fontSize: 10,
					color: '#181818'
				},
				orient: 'horizontal',
				lineHeight: 56,
				formatter: (name: any) => {
					const data = banned.moduleNum.options.series[0].data;
					let item = data.filter((i: any) => {
						return i.name == name
					})[0]
					if (!item) return
					let p = Math.round((item.value / sum(banned.moduleNum.options.series[0].data)) * 100)
					return [`${name}`, `${item.value} · ${p}%`].join('\n')
				}
			},
			color: ['#5BB4F9', '#4C69DC', '#1FDAE1'],
			series: [
				{
					type: 'pie',
					radius: ['66%', '90%'],
					center: ['50%', '50%'],
					avoidLabelOverlap: false,
					itemStyle: {
						borderColor: '#fff',
						borderWidth: 6
					},
					label: {
						normal: {
							show: true,
							position: 'center',
							color: '#4c4a4a',
							formatter: '{num|' + bannedChart.value.num + '}' + '\n\r' + '{title|' + bannedChart.value.title + '}',
							rich: {
								num: {
									fontSize: 50,
									fontFamily: "lcd",
									color: '#1F2E4C',
									fontWeight: '900',
								},
								title: {
									fontFamily: "lcd",
									fontSize: 14,
									color: '#1F2E4C',
									lineHeight: 10,
								},
							}
						},
						emphasis: {//中间文字显示
							show: true,
						}
					},
					lableLine: {
						normal: {
							show: false
						},
						emphasis: {
							show: true
						},
						tooltip: {
							show: false
						}
					},
					data: [
						{ value: 52, name: '特殊类' },
						{ value: 29, name: '通知类' },
						{ value: 8, name: '重点类' }
					]
				}
			]
		} as any,
	},
	moduleTrend: {
		title: '各部门发布的词库数量',
		badge: 0,
		tabs: {
			active: 'year'
		},
		options: {
			color: ['#4C69DC'],
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {
				show: false
			},
			grid: {
				left: '3%',
				right: '4%',
				top: '2%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: [
				{
					type: "value",
					boundaryGap: [0, 0.01],
					axisTick: {
						//y轴刻度线
						show: false
					},
					axisLine: {
						lineStyle: {
							color: "#ECECEC", //x轴边框颜色
							width: 1
						}
					},
					axisLabel: {
						margin: 20,
						textStyle: {
							fontSize: 10,
							color: '#646464'
						}
					}
				}
			],
			yAxis: [{
				type: 'category',
				data: ['监管机构', '监管机构用户', '平台企业', '平台企业用户'],
				axisLine: {
					show: false
				},
				axisTick: {
					//y轴刻度线
					show: false
				},
				axisLabel: {
					textStyle: {
						fontSize: 10,
						color: '#646464'
					}
				},
			}],
			series: [
				{
					type: 'bar',
					barWidth: 4,
					itemStyle: {
						normal: {
							barBorderRadius: [0, 2, 2, 0]
						}
					},
					data: [0, 0, 0, 0]
				}
			]
		}
	},
	moduleTo10: {
		title: '词库被引用次数的前十名',
		badge: 0,
		refresh: {
			loading: false
		},
		more: {
			loading: false,
			finished: false
		},
		lists: [] as any
	},
})

// tabs 切换回调
const bannedTabChange = (value: any) => {
	console.log('value', value)
}

// 下拉刷新回调
const bannedOnRefresh = () => {
	// 清空列表数据
	banned.moduleTo10.more.finished = false;

	// 重新加载数据
	// 将 loading 设置为 true，表示处于加载状态
	banned.moduleTo10.more.loading = true;
	bannedOnLoad();
}

// 加载更多回调
const bannedOnLoad = () => {
	getBannedQuote()
}

const router = useRouter()

const init = () => {
	getCountPolicy()
	getTrendencyPolicy('year')
	getCountLaw()
	getTrendencyLaw('year')
	getCountBanned()
	getPublishCount()
}

// 各部门发布的政策数量
const getCountPolicy = async () => {
	const data = await getPolicyCount()
	policyChart.value.num = data.data.zczsh
	const chartData = [
		{ value: data.data.jgjg, name: '监管机构' },
		{ value: data.data.qyptyh, name: '企业平台用户' },
		{ value: data.data.jgjgyh, name: '监管机构用户' },
		{ value: data.data.qypt, name: '企业平台' },
	]
	const formatter = '{num|' + policyChart.value.num + '}' + '\n\r' + '{title|' + policyChart.value.title + '}'
	policy.moduleNum.options.series[0].label.normal.formatter = formatter
	Object.assign(policy.moduleNum.options.series[0].data, chartData)
}

//政策发布数量趋势
const getTrendencyPolicy = async (type:string) => {
	const data = await getPolicyTendency({
		type:type
	})
	var xData = Array<string>()
	var series = Array<number>()
	for(var i=0;i<data.data.length;i++){
		xData.push(data.data[i].sjsj)
		series.push(data.data[i].zcsl)
	}
	Object.assign(policy.moduleTrend.options.xAxis[0].data,xData)
	Object.assign(policy.moduleTrend.options.series[0].data,series)
}

//政策被引用次数前十名
const getQuote = async () => {
	const data = await getPolicyQuote()
	if (policy.moduleTo10.refresh.loading) {
		policy.moduleTo10.lists = [];
		policy.moduleTo10.refresh.loading = false;
	}
	for (var i = 0; i < data.data.length; i++) {
		policy.moduleTo10.lists.push(data.data[i]);
	}
	policy.moduleTo10.more.loading = false;

	if (policy.moduleTo10.lists.length >= 40) {
		policy.moduleTo10.more.finished = true;
	} else {
		policy.moduleTo10.more.finished = false;
	}
}

// 各部门发布的法律法规数量
const getCountLaw = async () => {
	const data = await getLawCount()
	lawsChart.value.num = data.data.zczsh
	const chartData = [
		{ value: data.data.jgjg, name: '监管机构' },
		{ value: data.data.qyptyh, name: '企业平台用户' },
		{ value: data.data.jgjgyh, name: '监管机构用户' },
		{ value: data.data.qypt, name: '企业平台' },
	]
	const formatter = '{num|' + lawsChart.value.num + '}' + '\n\r' + '{title|' + lawsChart.value.title + '}'
	laws.moduleNum.options.series[0].label.normal.formatter = formatter
	Object.assign(laws.moduleNum.options.series[0].data, chartData)
}

//法律法规发布数量趋势
const getTrendencyLaw = async (type:string) => {
	const data = await getLawTendency({
		type:type
	})
	var xData = Array<string>()
	var series = Array<number>()
	for(var i=0;i<data.data.length;i++){
		xData.push(data.data[i].sjsj)
		series.push(data.data[i].zcsl)
	}
	Object.assign(laws.moduleTrend.options.xAxis[0].data,xData)
	Object.assign(laws.moduleTrend.options.series[0].data,series)
}

//法律法规被引用次数前十名
const getQuoteLaw = async () => {
	const data = await getPolicyQuote()
	for (var i = 0; i < data.data.length; i++) {
		laws.moduleTo10.lists.push(data.data[i]);
	}
}

// 禁售商品词库数量
const getCountBanned = async () => {
	const data = await getBannedCount()
	bannedChart.value.num = data.data.jszsh
	const chartData = [
		{ value: data.data.tsl, name: '特殊类' },
		{ value: data.data.tzl, name: '通知类' },
		{ value: data.data.zdl, name: '重点类' },
	]
	const formatter = '{num|' + bannedChart.value.num + '}' + '\n\r' + '{title|' + bannedChart.value.title + '}'
	banned.moduleNum.options.series[0].label.normal.formatter = formatter
	Object.assign(banned.moduleNum.options.series[0].data, chartData)
}
//禁售商品词库数量
const getPublishCount = async () => {
	const data = await getDeparmentPublish()
	const chartData = [data.data.qyptyh,data.data.qypt,data.data.jgjgyh,data.data.jgjg]
	Object.assign(banned.moduleTrend.options.series[0].data, chartData)
}

//禁售商品词库被引用次数前十名
const getBannedQuote = async () => {
	const data = await getPolicyQuote()
	for (var i = 0; i < data.data.length; i++) {
		banned.moduleTo10.lists.push(data.data[i]);
	}
}

onMounted(() => {
	init()
})

</script>
<style lang="scss" scoped>
.pages {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 16px 12px;

	//任务待办
	.titlebar {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			display: flex;
			align-items: center;

			.line {
				width: 4px;
				height: 16px;
				margin-right: 8px;
				background-color: $primary-color;
			}

			.text {
				font-weight: 700;
				text-align: left;
				color: #181818;
				line-height: 12px;
			}
		}

		.badge {
			width: 29px;
			height: 16px;
			border-radius: 8.5px;
			background-color: $primary-color;
			text-align: center;
			line-height: 16px;
			font-size: 10px;
			font-weight: bold;
			color: #fff;
		}
	}

	.subtitlebar {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			display: flex;
			align-items: center;

			.line {
				width: 0px;
				height: 12px;
				border: 4px solid transparent;
				border-left: 4px solid $primary-color;
				margin-right: 4px;
				margin-bottom: 2px;
			}

			.text {
				font-weight: 700;
				text-align: left;
				color: #181818;
				line-height: 12px;
			}
		}

		.badge {
			width: 29px;
			height: 16px;
			border-radius: 8.5px;
			background-color: $primary-color;
			text-align: center;
			line-height: 16px;
			font-size: 10px;
			font-weight: bold;
			color: #fff;
		}

		.date {
			display: flex;
			align-items: center;
			justify-content: center;

			&::v-deep(.van-tabs) {
				.van-tabs__wrap {
					.van-tabs__nav {
						margin: 0;
						background-color: #F8FAFB;
						border-color: #e3e6f1;

						.van-tab {
							padding: 6px 14px;
							border-color: #e3e6f1;
							color: #8F9BB2;
						}

						.van-tab--active {
							background-color: #F8FAFB !important;
							border: 1px solid #3377FF !important;
							color: #3377FF;
						}
					}
				}
			}
		}
	}

	.titlebar2 {
		display: flex;
		align-items: center;
		margin-bottom: 16px;

		.icon {
			margin-right: 8px;

			img {
				width: 12px;
				height: 12px;
			}
		}

		.title {
			font-size: 14px;
			font-weight: bold;
			color: #1f2e4c;
		}
	}

	// 信息上报
	.policy,
	.laws {
		// .dashed {
		// 	border-bottom-width: 1px;
		// 	border-color: #1F2E4C;
		// }

		.chart-container {
			height: 225px;
			margin-bottom: 16px;
		}

		.chart-h {
			height: 180px !important;
		}

		.legend {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			grid-template-rows: repeat(2, minmax(0, 1fr));
			grid-gap: 20px;
			justify-items: center;
			margin-bottom: 16px;

			.item {
				display: flex;

				.square {
					width: 8px;
					height: 8px;
					border-radius: 2.5px;
					margin-right: 8px;
				}

				.content {
					font-size: 10px;
					font-weight: bold;
					color: #1f2e4c;

					.title {
						margin-bottom: 10px;
					}

					.value {}
				}
			}
		}

		.legend-date {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.legend-list {
				display: flex;

				.legend-item {
					display: flex;
					align-items: center;
					margin-right: 12px;

					.square {
						width: 7px;
						height: 7px;
						border-radius: 2.5px;
						margin-right: 5px;
					}

					.name {
						font-size: 10px;
						font-weight: 400;
						color: #273552;
					}
				}
			}

			.date {
				&::v-deep(.van-tabs) {
					.van-tabs__wrap {
						.van-tabs__nav {
							margin: 0;
							background-color: #F8FAFB;
							border-color: #e3e6f1;

							.van-tab {
								padding: 6px 14px;
								border-color: #e3e6f1;
								color: #8F9BB2;
							}

							.van-tab--active {
								background-color: #F8FAFB !important;
								border: 1px solid #3377FF !important;
								color: #3377FF;
							}
						}
					}
				}
			}
		}

		.lists {
			height: 220px;
			overflow-y: scroll;

			&::-webkit-scrollbar {
				width: 4px;
				background-color: #f8f8f8;
			}

			&::-webkit-scrollbar-thumb {
				width: 4px;
				background-color: $primary-color;
				border-radius: 1.5px;
			}

			.lists-item {
				box-sizing: border-box;
				padding: 8px 0;

				.content {
					display: flex;
					align-items: center;

					.icon {
						margin-right: 9px;

						img {
							width: 14px;
							height: 16px;
						}

						div {
							width: 14px;
							height: 16px;
							font-size: 10px;
							border-radius: 50%;
							background-color: #F1F4FF;
							text-align: center;
							line-height: 16px;
							color: $primary-color;
						}
					}

					.title {
						font-size: 14px;
						font-weight: bold;
						color: #181818;
					}
				}

				.divider {
					margin-top: 12px;
					margin-bottom: 0;
				}
			}
		}
	}

	.banned {
		// .dashed {
		// 	border-bottom-width: 1px;
		// 	border-color: #1F2E4C;
		// }

		.chart-container {
			height: 225px;
			margin-bottom: 16px;
		}

		.chart-h {
			height: 140px !important;
		}

		.legend {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			grid-template-rows: repeat(1, minmax(0, 1fr));
			grid-gap: 20px;
			justify-items: center;
			margin-bottom: 16px;

			.item {
				display: flex;

				.square {
					width: 8px;
					height: 8px;
					border-radius: 2.5px;
					margin-right: 8px;
				}

				.content {
					font-size: 10px;
					font-weight: bold;
					color: #1f2e4c;

					.title {
						margin-bottom: 10px;
					}

					.value {}
				}
			}
		}

		.legend2 {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			grid-template-rows: repeat(1, minmax(0, 1fr));
			grid-gap: 20px;
			justify-items: start;
			margin-bottom: 16px;

			.item {
				display: flex;
				align-items: center;
				white-space: nowrap;

				.square {
					width: 3.5px;
					height: 3.5px;
					border-radius: 2px;
					margin-right: 6px;
				}

				.content {
					font-size: 10px;
					font-weight: bold;
					color: #1f2e4c;
					display: flex;
					flex-direction: row;
					align-items: center;

					.title {}

					.split {}

					.value {}
				}
			}
		}

		.legend-date {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.legend-list {
				display: flex;

				.legend-item {
					display: flex;
					align-items: center;
					margin-right: 12px;

					.square {
						width: 7px;
						height: 7px;
						border-radius: 2.5px;
						margin-right: 5px;
					}

					.name {
						font-size: 10px;
						font-weight: 400;
						color: #273552;
					}
				}
			}

			.date {
				&::v-deep(.van-tabs) {
					.van-tabs__wrap {
						.van-tabs__nav {
							margin: 0;
							background-color: #F8FAFB;
							border-color: #e3e6f1;

							.van-tab {
								padding: 6px 14px;
								border-color: #e3e6f1;
								color: #8F9BB2;
							}

							.van-tab--active {
								background-color: #F8FAFB !important;
								border: 1px solid #3377FF !important;
								color: #3377FF;
							}
						}
					}
				}
			}
		}

		.lists {
			height: 220px;
			overflow-y: scroll;

			&::-webkit-scrollbar {
				width: 4px;
				background-color: #f8f8f8;
			}

			&::-webkit-scrollbar-thumb {
				width: 4px;
				background-color: $primary-color;
				border-radius: 1.5px;
			}

			.lists-item {
				box-sizing: border-box;
				padding: 8px 0;

				.content {
					display: flex;
					align-items: center;

					.icon {
						margin-right: 9px;

						img {
							width: 14px;
							height: 16px;
						}

						div {
							width: 14px;
							height: 16px;
							font-size: 10px;
							border-radius: 50%;
							background-color: #F1F4FF;
							text-align: center;
							line-height: 16px;
							color: $primary-color;
						}
					}

					.title {
						font-size: 14px;
						font-weight: bold;
						color: #181818;
					}
				}

				.divider {
					margin-top: 12px;
					margin-bottom: 0;
				}
			}
		}
	}

	.card {
		background: #ffffff;
		border-radius: 5px;
		box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
		padding: 16px 12px;
		margin: 16px 0;

		&:last-child {
			margin-bottom: 0;
		}
	}
}
</style>